import { EditableProTable, ProForm } from "@ant-design/pro-components";
import { useModel } from "@umijs/max";
import { FormInstance, Segmented } from "antd";
import React, { useEffect, useState } from "react";
import CustomEditor from "@/components/CustomEditor";
import './index.less'

const CustomEditTable: React.FC<any> = ({
    form,
    name,
}: {
    form?: FormInstance
    [key: string]: any
}) => {

    return <EditableProTable<any>
        rowKey="id"
        className="api_custom_edit_table"
        recordCreatorProps={{
            position: 'bottom',
            record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
        }}
        toolBarRender={false}
        loading={false}
        columns={[
            {
                title: '参数名',
                dataIndex: 'key',
            },

            {
                title: '参数值',
                dataIndex: 'value',
              // TODO formdata支持上传文件
            },
            {
                title: '操作',
                valueType: 'option',
                render: (text, record, _, action) => [
                    <a
                        key="editable"
                        onClick={() => {
                            action?.startEditable?.(record.id);
                        }}
                    >
                        编辑
                    </a>,
                    <a
                        key="delete"
                        onClick={() => {
                            const tableDataSource = form?.getFieldValue(
                                name,
                            ) as any[];
                            form?.setFieldsValue({
                                [name]: tableDataSource.filter((item) => item.id !== record.id),
                            });
                        }}
                    >
                        删除
                    </a>,
                ],
            },

        ]}
        name={name}
        editable={{
            type: 'multiple',
        }}
    />
}

const ReqBody: React.FC<any> = ({
    form,
}) => {
    const [currentEdit, setCurrentEdit] = useState('NONE')
    const { initialState } = useModel('@@initialState');

    useEffect(() => {
        form?.getFieldsValue()?.bodyType && setCurrentEdit(form?.getFieldsValue()?.bodyType)
    }, [form?.getFieldsValue()?.bodyType])

    return <>
        <ProForm.Item name={'bodyType'} style={{ marginBottom: 0 }}>
            <Segmented
                value={currentEdit}
                options={[
                    { label: 'none', value: 'NONE' },
                    { label: 'form-data', value: 'FORM_DATA' },
                    { label: 'x-www-form-urlencoded', value: 'X_WWW_FORM_URLENCODED' },
                    { label: 'json', value: 'JSON' },
                ]}
                onChange={(value) => {
                    setCurrentEdit(value as any)
                }}
                style={{ borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }}
            />
        </ProForm.Item>
        <div
            style={{
                display: currentEdit == 'NONE' ? 'flex' : 'none',
                padding: '30px 40px',
                color: '#999',
                alignItems: 'center',
                justifyContent: 'center',
                backgroundColor: initialState?.settings?.navTheme == 'realDark' ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.05)'
            }}>该请求没有body体</div>
        <div style={{ display: currentEdit == 'FORM_DATA' ? 'block' : 'none' }}>
            <CustomEditTable name={'FORM_DATA'} form={form} />
        </div>
        <div style={{ display: currentEdit == 'X_WWW_FORM_URLENCODED' ? 'block' : 'none' }}>
            <CustomEditTable name={'X_WWW_FORM_URLENCODED'} form={form} />
        </div>
        <div style={{ display: currentEdit == 'JSON' ? 'block' : 'none' }}>
            <ProForm.Item name={'JSON'}>
                <CustomEditor />
            </ProForm.Item>
        </div>

    </>
}

export default ReqBody
